<template>
  <div class="pt-12 md:pt-0">
    <nav class="fixed md:relative left-0 top-0 nav w-full h-12 md:h-[100px] flex z-50">
      <div class="md:hidden flex items-center justify-center w-full px-2">
        <div class="absolute left-6 -translate-x-[50%]">
          <svg v-show="!isShow" @click="isShow = true" width="18" height="18" viewBox="0 -2 22 22">
            <path fill="transparent" stroke-width="2" stroke="#fff" stroke-linecap="round" d="M 2 2.5 L 20 2.5"></path>
            <path fill="transparent" stroke-width="2" stroke="#fff" stroke-linecap="round" d="M 2 9.423 L 20 9.423" opacity="1"></path>
            <path fill="transparent" stroke-width="2" stroke="#fff" stroke-linecap="round" d="M 2 16.346 L 20 16.346"></path>
          </svg>
          <svg v-show="isShow" @click="isShow = false" width="18" height="18" viewBox="0 -2 22 22">
            <path fill="transparent" stroke-width="2" stroke="#fff" stroke-linecap="round" d="M 4 16.5 L 18 2.5"></path>
            <path fill="transparent" stroke-width="2" stroke="#fff" stroke-linecap="round" d="M 2 9.423 L 20 9.423" opacity="0"></path>\
            <path fill="transparent" stroke-width="2" stroke="#fff" stroke-linecap="round" d="M 4 2.5 L 18 16.346"></path>
          </svg>
        </div>
        <div class="transition-opacity opacity-100 pointer-events-auto text-white">
          北京玖芾国际教育咨询有限公司
        </div>
        <div></div>
      </div>
      <div class="hidden cursor-pointer md:flex items-center justify-center w-full h-full dm:pt-25">
        <div class="text-xl/[100px] font-semibold text-white">北京玖芾国际教育咨询有限公司</div>
        <div class="hidden md:flex items-center justify-center h-full space-x-[10px] lg:space-x-[40px] xl:space-x-[60px] ml-[100px] lg:ml-[180px] xl:ml-[200px] text-white text-base/[100px] text-normal">
          <p :class="['pl-[15px] h-full pr-[15px] hover:bg-[#B660BE]', active === 1 && 'bg-[#B660BE]']" @click="onLink('/')">首页</p>
          <p :class="['pl-[15px] h-full pr-[15px] hover:bg-[#B660BE]', active === 2 && 'bg-[#B660BE]']" @click="onLink('/about')">关于我们</p>
          <p :class="['pl-[15px] h-full pr-[15px] hover:bg-[#B660BE]', active === 3 && 'bg-[#B660BE]']" @click="onLink('/serve')">高定服务</p>
          <p :class="['pl-[15px] h-full pr-[15px] hover:bg-[#B660BE]', active === 4 && 'bg-[#B660BE]']" @click="onLink('/news/list')">新闻中心</p>
          <!-- <p>合作热线</p> -->
        </div>
      </div>
    </nav>
    <div v-show="isShow" @click="isShow = !isShow" class="mask top-12 backdrop-blur"></div>
    <div :class="['px-2 pt-5 pb-32 overflow-y-scroll top-12 side', isShow && 'side_show']">
      <div @click="onLink('/')" class="text-gray-500 hover:text-gray-800 transition-colors flex items-center rounded hover:bg-gray-100 space-x-1.5 px-3 py-2.5">
        首页
      </div>
      <div @click="onLink('/about')" class="text-gray-500 hover:text-gray-800 transition-colors flex items-center rounded hover:bg-gray-100 space-x-1.5 px-3 py-2.5">
        关于我们
      </div>
      <div @click="onLink('/serve')" class="text-gray-500 hover:text-gray-800 transition-colors flex items-center rounded hover:bg-gray-100 space-x-1.5 px-3 py-2.5">
        高定服务
      </div>
      <div @click="onLink('/news/list')" class="text-gray-500 hover:text-gray-800 transition-colors flex items-center rounded hover:bg-gray-100 space-x-1.5 px-3 py-2.5">
        新闻中心
      </div>
      <!-- <div class="text-gray-500 hover:text-gray-800 transition-colors flex items-center rounded hover:bg-gray-100 space-x-1.5 px-3 py-2.5">
        合作热线
      </div> -->
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
let isShow = ref(false)
let router = useRouter()
let route = useRoute()
let onLink = (path) => {
  console.log(route,path , route.path, path === route.path)
  if (path === route.path) {
    isShow.value = false
    return false
  }
  router.push(path)
}
let active = computed(() => {
  let obj = {
    '/': 1,
    '/about': 2,
    '/serve': 3,
    '/news/list': 4,
    '/news/detail': 4
  }
  return obj[route.path] || 1
})
</script>
<style lang="scss" scoped>
.nav {
  background: linear-gradient(90deg, #7527B2, #892C8B);
}
.side {
  position: fixed;
  // top: 0px;
  left: 0px;
  width: 200px;
  height: 100vh;
  overflow: scroll;
  border: 1px solid rgb(243, 244, 246);
  transition: transform 250ms ease-out 0s;
  background-color: white;
  z-index: 999;
  transform: translateX(-100%);
  &.side_show {
    transform: translateX(0px);
  }
}
.mask {
  position: fixed;
  width: 100vh;
  height: 100vh;
  background-color: rgba(107, 114, 128, 0.75);
  transition: opacity 250ms ease 0s;
  z-index: 998;
  opacity: 1;
  pointer-events: auto;
}
</style>